<template>
  <div class="time_device_box">
    <!--  时间轴-->
    <div class="time_box_list">
      <div class="time_box_item" v-for="(item,index) in test_data.test_list" :key="index">
        <span>{{ item }}</span>
      </div>
    </div>
    <div class="time_box_content">
      <div class="time_box_item" v-for="(item,index) in test_data.test_list" :key="index">

      </div>
      <div class="time_box_device" style="width: 100%">
<!--        <device canvas="test1"/ >-->
        <canvas  :id="test_data.canvas" :width="test_data.width" height="30"/>
      </div>
    </div>
  </div>
</template>

<script>
import device from "@/components/echart_components/device";
import {reactive,getCurrentInstance} from "vue"
import {useRoute} from "vue-router";
import {decode_data} from "@/utils/base64";
import {get_device_status_info_by_code} from "@/api/cockpit/data";
import {getStyleByEl} from "@/utils/dom/get_dom_style";
function handle_data_list(data) {
  for (let i = 0; i < data.length; i++) {
    try {
      // console.log(data[i].dictCode.split(','))
      const dicCode = data[i].dictCode.split(',')
      data[i].dictCode = dicCode
    } catch (e) {
      // message.error("数据异常")
      data[i].dictCode = []
    }
  }
  return data;

}
export default {
  name: "device_time",
  props: {},
  setup() {
    const {ctx} = getCurrentInstance()
    const route = useRoute()
    const test_data = reactive({
      test_list: [],
      data:[],
      canvas:"device_single",
      width:""
    })
    const handle_time = () => {
      for (let i = 0; i < 24; i++) {
        if (i < 10) {
          test_data.test_list.push(`0${i}:00`)
        } else {
          test_data.test_list.push(`${i}:00`)
        }

      }
    }
    // const get_data_list = async () => {
    //   let params = {
    //     uEquipmentCode: decode_data(route.query.uEquipmentCode)
    //   }
    //   const res = await get_device_status_info_by_code(params)
    // }
    const get_data_list = async () => {
      let params = {
        uEquipmentCode: decode_data(route.query.uEquipmentCode)
      }
      const res = await get_device_status_info_by_code(params)
      if (res.code === 1) {
        test_data.data = handle_data_list(res.data)
        ctx.init(test_data.data[0].dictCode, test_data.canvas)
      }
    }
    handle_time()
    return {
      test_data,
      get_data_list
    }
  },
  methods:{
    init(data_list, canvas) {
      // const data_list = data_status_list.value
      //绘制的宽度
      const width_item = this.test_data.width / data_list.length
      // debugger
      // function start_draw() {
      try {
        let canvas_dom = document.getElementById(canvas);
        // console.log(width_item)
        let context = canvas_dom.getContext("2d");
        let colors = ["#FF0000", "#00FF00", "#ffff00", "#05274c"]; //"#ffff00"
        //--数据处理  DictCode 字段值  0 关机,1 待机， 2 工作，3 异常， 99 还未开始
        // let timer = setInterval(() => {
        let color = colors[Math.floor(Math.random() * colors.length)]

        for (let i = 0; i < data_list.length; i++) {
          const x = i * width_item;
          const val = Number(data_list[i]);
          context.fillRect(x, 0, width_item, 30);
          // console.log(val)
          if (val === 0) {
            color = colors[0]
          } else if (val === 1 || val === 2) {
            color = colors[1]
          } else if (val === 3) {
            color = colors[2]
          } else {
            color = colors[3]
          }
          context.fillStyle = color;
        }
      } catch (e) {
        console.log("发生异常")

      }
      // }
    }
  },
  mounted() {
    setTimeout(()=>{
      const el = document.querySelector('.time_box_content');
      const style = getStyleByEl(el)
      this.test_data.width = Math.floor(Number(style.width.toString().replace('px', '')))
      this.get_data_list()
    },1000)
  },
  components: {
    device
  }
}
</script>

<style scoped lang="scss">


</style>
